<template>
  <div id="app">
    <!-- 普通路由的跳转 -->
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>-->

    <!-- 命名路由的跳转 -->
    <!-- <div id="nav">
      <router-link :to="{ name: 'home' }">Home</router-link> |
      <router-link :to="{ name: 'about' }">About</router-link>
    </div>
    <router-view/>-->

    <!-- 命名视图: 创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了 -->
    <router-view />
    <router-view name="email" />
    <router-view name="tel" />

    <!-- 过渡动效 -->

    <!-- 只有一个路由 -->
    <!-- <transition>
        <router-view/>
    </transition>-->

    <!-- 多个路由时需要设置每个路由的key值 -->
    <!-- <transition-group :name="routerTransition">
        <router-view key="default"/>
        <router-view key="email" name="email"/>
        <router-view key="tel" name="tel"/>
    </transition-group>-->

    <!--
      router-link其实封装的是a标签，to是要跳转的路由地址path
      router-view是路由视图，点击router-link跳转的路由就在这显示
    -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      routerTransition: '' // 路由过渡动效的名称
    }
  },
  watch: {
    // 可以根据路由传参的参数，设置路由不同的过渡动效
    $route (to) {
      to.query &&
        to.query.transitionName &&
        (this.routerTransition = to.query.transitionName)
    }
  }
}
</script>

<style lang="less">
// router是在transition定义的name值

// 页面进入时的样式
.router-enter {
  // 页面即将要显示的状态
  opacity: 0;
}
.router-enter-active {
  // 页面显示中的样式
  transform: opacity 1s ease;
}
.router-enter-to {
  // 页面显示之后的样式
  opacity: 0;
}
// 页面离开时的样式
.router-leave {
  // 页面即将要消失的状态
  opacity: 1;
}
.router-leave-active {
  // 页面消失中的样式
  transform: opacity 1s ease;
}
.router-leave-to {
  // 页面消失之后的样式
  opacity: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
